<template>
    <section class="container">
        <div class="search-main mb20">
           <bk-input :clearable="true" v-model="value" :show-clear-only-hover="true" @clear="handleSearch" @enter="handleSearch"></bk-input>
          <bk-button :theme="'primary'"  class="ml10" @click='handleSearch'>
              搜索
          </bk-button>         
        </div>
          <div class="bk-layout-col" style="width: 100%">
          <bk-table
            :data="tableData"
            :max-height="520"
            ref="table"
            >
            <bk-table-column label="名称" prop="name"></bk-table-column>
            <bk-table-column label="内网IP" prop="ip"></bk-table-column>
            <bk-table-column label="来源" prop="source"></bk-table-column>
            <bk-table-column label="状态" prop="status"></bk-table-column>
            <bk-table-column label="创建时间" prop="create_time"></bk-table-column>
          </bk-table>  
          <bk-pagination
            class="mt20"
            :current.sync="defaultPaging.current"
            :count.sync="defaultPaging.count"
            :limit="defaultPaging.limit"
            @limit-change="handleLimitChange"
            @change="handlePageChange">
          </bk-pagination>                
          </div>
        </div>
    </section>
</template>

<script>
    export default {
        data () {
            return {
                tableData: [],
                value: '',
                defaultPaging: {
                    current: 1,
                    limit: 10,
                    count: 0
                }
            }
        },
        computed: {

        },
        methods: {
          handleSearch () {
            this.defaultPaging.current = 1
            this.getMagicTableData()
          },
          handleLimitChange (limit) {
            this.defaultPaging.current = 1
            this.defaultPaging.limit = limit
            this.getMagicTableData()
          },
          handlePageChange (page) {
            this.getMagicTableData()
          },
          getMagicTableData () {
            this.$store.dispatch('example/getMagicTableData', {
              page: this.defaultPaging.current,
              page_size: this.defaultPaging.limit,
              value: this.value
            }).then(res => {
              
              this.tableData = res.data.list
              this.defaultPaging.count = res.data.total
            })
          }
        },
        created() {
          this.getMagicTableData()
        },
    }
</script>
<style lang="css">
    .container {
        margin: 10px;
    }
    .bk-layout-row {
        display: flex;
    }
    .bk-layout-row:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 还原 bk-button 组件的 vertical-align 样式 */
    .bk-layout-col button.bk-button {
        vertical-align: baseline;
    }
    /* 每个组件之间默认外边距 5px */
    .bk-layout-component {
        margin: 5px;
    }

    .buttona2881fdf {
        display: inline-block;
    }
    .button2358739e {
        display: inline-block;
    }
    .pagination01ab2757 {
        display: block;
    }
    .search-main {
        display: flex;
        align-items: center;
    }
    .search-main .bk-form-control {
        width: 320px;
    }
</style>